import {Form, FormInstance, Input} from 'antd';
import React, {FC, useEffect, useState} from 'react';
import styles from './Step01.less'
import {FormData02} from "@/pages/form/step-form/Step02";

/**
 * 表单数据
 */
export interface FormData01 {
    name: string;
}

interface Step01Props {
    /**
     * 表单初始数据
     */
    formData: object | FormData01;
    /**
     * 分步挂载完毕之后触发的回调,表单实例会作为入参
     * @param form
     */
    onMounted: (form: FormInstance) => void;
}

// 当前表单分步索引号
const CUR_FORM_STEP_INDEX = 0;

const Step01: FC<Step01Props> = (props) => {
    const {children, formData, onMounted} = props;

    const [form] = Form.useForm();

    useEffect(() => {
        console.log('Step01 组件挂载完毕!');
        onMounted(form);
        return () => {
            console.log('Step01卸载!')
        }
    }, []);

    console.log('Step01 组件render!');
    return (
        <div>
            <div>Step01</div>
            <Form
                form={form}
                initialValues={formData}
            >
                <Form.Item
                    label="姓名"
                    name="name"
                    rules={[{required: true, message: '请输入姓名!'}]}
                >
                    <Input/>
                </Form.Item>
            </Form>
        </div>
    );
};

export default Step01;
